<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="dist/styles/style.css">
</head>
<body>

<header class="header">
    <article class="container">
        <figure class="logo">
            <img src="assets/images/logo.png" alt="Logo">
        </figure>
        <button id="burger" class="burger">
                <span></span>
                <span></span>
                <span></span>
        </button>
        <nav id="menu" class="menu">
            <button class="close">
                    <span></span>
                    <span></span>
            </button>
            <ul class="menu-list">
                <li class="menu-item"><a href="#products">Пироженки</a></li>
                <li class="menu-item"><a href="#">О нас</a></li>
                <li class="menu-item"><a href="#order">Оформить заказ</a></li>
            </ul>
        </nav>
        <a href="tel:+375293689868" class="phone">+375 (29) 368-98-68</a>
    </article>
</header>

<main class="main">
    <section class="macaroons-info">
        <article class="container">
            <h1 class="macaroons-info-title">
                Мягкие французские пироженки Macaroons
            </h1>
            <p class="macaroons-info-desc">
                Побалуйте себя и своих близких самыми вкусными и ароматными домашними пироженками Macaroon!
            </p>
            <article class="macaroons-info-button">
                <button class="btn macaroons-info-btn">Выбрать макарун</button>
            </article>
            <figure class="macaroons-info-image">
                <img src="assets/images/macaroons_info.png" alt="Macaroons_info">
            </figure>
        </article>
    </section>

    <section class="advantages">
        <article class="container">
            <h2 class="advantages-title">
                Мы печём для вас вкуснейшие макаруны уже более 10 лет
            </h2>
            <p class="advantages-desc">
                Все пироженки мы готовим только из натуральных и качественных продуктов, без консервантов,
                ароматизаторов, красителей. Используем в приготовлении сливочное масло 82,5%, без дрожжей, маргарина,
                разрыхлителей и улучшителей муки.
            </p>
            <figure class="advantages-image">
                <img src="assets/images/advantages_macaroon.png" alt="Advantages_macaroon">
            </figure>
            <ul class="advantages-list">
                <li class="advantages-list-item">
                    <figure class="circle-number">
                        <span>1</span>
                    </figure>
                    <h5 class="advantages-list-title">Лучшие продукты</h5>
                    <p class="advantages-list-desc">
                        Мы честно готовим макаруны только из натуральных и качественных продуктов. Мы не используем
                        консерванты, ароматизаторы и красители.
                    </p>
                </li>
                <li class="advantages-list-item">
                    <figure class="circle-number">
                        <span>2</span>
                    </figure>
                    <h5 class="advantages-list-title">Много вкусов</h5>
                    <p class="advantages-list-desc">
                        Наша задача – предоставить вам широкое разнобразие вкусов. Вы удивитесь, но у нас более 70
                        вкусов пироженок.
                    </p>
                </li>
                <li class="advantages-list-item">
                    <figure class="circle-number">
                        <span>3</span>
                    </figure>
                    <h5 class="advantages-list-title">Бисквитное тесто</h5>
                    <p class="advantages-list-desc">
                        Все пирожные готовятся на бисквитном тесте с качественным сливочным маслом 82,5%. В составе нет
                        маргарина и дрожжей!
                    </p>
                </li>
                <li class="advantages-list-item">
                    <figure class="circle-number">
                        <span>4</span>
                    </figure>
                    <h5 class="advantages-list-title">Честный продукт</h5>
                    <p class="advantages-list-desc">
                        Вкус, качество и безопасность наших пирогов подтверждена декларацией о соответствии, которую мы
                        получили 22.06.2016 г.
                    </p>
                </li>
            </ul>
        </article>
    </section>

    <section id="products" class="products">
        <article class="container">
            <h2 class="products-title">Выберите свой макарун</h2>
            <ul class="products-list">
                <li class="product-item">
                    <figure class="product-item-image">
                        <img src="assets/images/macaroon_1.png" alt="Product 1">
                    </figure>
                    <article class="product-item-action">
                        <h6 class="product-item-title">Макарун с малиной</h6>
                        <p class="product-item-count">1 шт.</p>
                        <p class="product-item-price">1,70 руб.</p>
                        <button class="btn product-item-btn">Заказать</button>
                    </article>
                </li>
                <li class="product-item">
                    <figure class="product-item-image">
                        <img src="assets/images/macaroon_2.png" alt="Product 1">
                    </figure>
                    <article class="product-item-action">
                        <h6 class="product-item-title">Макарун с манго</h6>
                        <p class="product-item-count">1 шт.</p>
                        <p class="product-item-price">1,70 руб.</p>
                        <button class="btn product-item-btn">Заказать</button>
                    </article>
                </li>
                <li class="product-item">
                    <figure class="product-item-image">
                        <img src="assets/images/macaroon_3.png" alt="Product 1">
                    </figure>
                    <article class="product-item-action">
                        <h6 class="product-item-title">Пирог с ванилью</h6>
                        <p class="product-item-count">1 шт.</p>
                        <p class="product-item-price">1,70 руб.</p>
                        <button class="btn product-item-btn">Заказать</button>
                    </article>
                </li>
                <li class="product-item">
                    <figure class="product-item-image">
                        <img src="assets/images/macaroon_4.png" alt="Product 1">
                    </figure>
                    <article class="product-item-action">
                        <h6 class="product-item-title">Пирог с фисташками</h6>
                        <p class="product-item-count">1 шт.</p>
                        <p class="product-item-price">1,70 руб.</p>
                        <button class="btn product-item-btn">Заказать</button>
                    </article>
                </li>
            </ul>
        </article>
    </section>

    <section id="order" class="order">
        <article class="container">
            <figure class="order-image">
                <img src="assets/images/macaroons.png" alt="Macaroons" class="order-image-img">
            </figure>
            <article class="order-form">
                <h2 class="order-form-title">Закажите макарун!</h2>
                <p class="order-form-desc">
                    Выберите понравившийся макарун, заполните форму и ожидайте звонка нашего пекаря!
                </p>
                <form class="form">
                    <p class="form-choice">
                        Ваш выбор
                    </p>
                    <label id="labelOrder">
                        <input type="text" placeholder="Напишите, что хотите заказать..." name="product" class="form-input">
                    </label>
                    <p class="form-data">
                        Заполните данные для заказа
                    </p>
                    <label id="labelName">
                        <input type="text" placeholder="Ваше имя" name="name" class="form-input">
                    </label>
                    <label id="labelPhone">
                        <input type="tel" placeholder="+7 (999) 999-9999" name="phone" class="form-input">
                    </label>
                    <button class="btn form-btn">Оформить заказ</button>
                </form>
            </article>
            <article class="order-done">
                <h2 class="order-form-title">Спасибо за Ваш заказ. Мы скоро свяжемся с Вами!</h2>
            </article>
            <img src="assets/images/strawberries_1.png" alt="Strawberries 1" class="order-form-img-big">
            <img src="assets/images/strawberries_2.png" alt="Strawberries 2" class="order-form-img">
        </article>
    </section>

    <footer class="footer">
        <article class="container">
            <article class="footer-logo-copy">
                <figure class="logo">
                    <img src="assets/images/logo.png" alt="Logo">
                </figure>
                <p class="copy">Все права защищены, 2020</p>
            </article>
            <figure class="footer-social">
                <img src="assets/images/instagram.png" alt="Instagram">
                <figcaption class="social-desc">Мы в Instagram</figcaption>
            </figure>
            <a href="tel:+375293689868" class="phone">+375 (29) 368-98-68</a>
            <p class="copy-adaptive-visible">Все права защищены, 2020</p>
        </article>
    </footer>
    <figure class="present-image-wrap">
        <a href="#"><img src="assets/images/present.png" alt="Present" class="present-image"></a>
    </figure>
    <figure class="present-message">
        <figcaption class="message">
            Оформите заказ и получите подарок!
        </figcaption>
    </figure>
</main>

<figure class="loader">
    <div class="lds-facebook"><div></div><div></div><div></div></div>
</figure>

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="scripts/jquery.inputmask.min.js"></script>
<script src="scripts/main.js"></script>

</body>
</html>